<!--
  -
  - +----------------------------------------------------------------------
  - | 友得云客  - 开启房产营销新纪元
  - +----------------------------------------------------------------------
  - | Copyright (c) 2019~2024 优得（西安）信息科技有限公司版权所有
  - +----------------------------------------------------------------------
  - | Licensed 友得云客不是自有软件 未经允许不可移除相关版权
  - +----------------------------------------------------------------------
  - | Author: www.youdeyunke.com
  - +----------------------------------------------------------------------
  -
  -->

<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="app-container" style="height: calc(100vh - 84px) ;display: flex;justify-content: center;align-items: center;" v-cloak>

  <div class="license-container">
    <div class="header">
      <img src="https://qiniucdn.udeve.net/udyk/65efac818ecaa8cca130c6c3.png" class="logo" alt="">
      <div class="line" style="background:#484848"></div>
      <!-- <img class="license-img" v-if="license_is_free" src="https://qiniucdn.udeve.net/udyk/667a736ce4b0978a2cfe809d.png">
      <img class="license-img" v-else src="https://qiniucdn.udeve.net/udyk/667a736ce4b0978a2cfe809e.png"> -->
      <div class="license-info-text">
        {{license_type_text}}
      </div>
    </div>

    <div class="content">
      <div class="button-group">
        <el-button @click="showDialog(3)" :loading="loading" class="Btn">变更授权码</el-button>
        <el-button @click="serviceContact()" :loading="loading" class="Btn">专属售后客服</el-button>
        <el-button @click="gotoDoc()" :loading="loading" class="Btn">操作文档</el-button>
        <el-button @click="gotoDevDoc()" :loading="loading" class="Btn">二开文档</el-button>
      </div>

      <div class="divider" ></div>

      <div class="info">
        <div>
          <span class="label">版本号</span>
          <span class="value">{{server_version || '-'}}</span>
        </div>
        <div>
          <span class="label">激活时间</span>
          <span class="value">{{licenseInfo.first_used_time}}</span>
        </div>
        <div>
          <span class="label">授权至</span>
          <span class="value">{{endTime}}  <template v-html="endTimeWarm"></template></span>
        </div>
        <div>
          <span class="label">机器数</span>
          <span class="value">{{ licenseInfo.maximum_bound_machine_number }}</span>
        </div>
        <div>
          <span class="label">授权码</span>
          <span class="value">{{licenseInfo.license_key}}</span>
          <el-button v-if="licenseInfo" :disabled="loading" size="mini" @click="showDialog(3)" :loading="loading"  plain class="changeBtn">变更</el-button>
        </div>
        <div>
          <span class="label">许可ID</span>
          <span class="value">{{licenseInfo.license_id}}</span>
        </div>
      </div>

    </div>

    <div class="footer">
      <span class="update-info">更新于：{{licenseInfo.issue_time}}</span>
      <i @click="refreshLicenseInfo()" class="el-icon-refresh-right update-icon"></i>
    </div>

  </div>
  <el-dialog :title="dialogTitle" :visible.sync="show" width="25%">
    <el-form label-position="top">
      <el-form-item v-if="dialogType==3" >
        <el-input  v-model="newLicense" placeholder="请输入新的授权码" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="showDialog">取 消</el-button>
      <el-button size="mini" :loading="loading" :disabled="loading" type="primary" @click="changeLicense()">确 定</el-button>
    </div>
  </el-dialog>

  </div>
</template>

<script>
import {getLicenseInfo, refreshLicenseInfo, replaceLicenseInfo, updateLogo} from '@/api/licenseinfo';
import ImagePicker from "@/components/ImagePicker";
import UdCard from "@/components/UdCard";

export default {
  components:{
    ImagePicker,
    UdCard
  },
  name: 'license',
  data() {
    return {
      updating: false,
      dateRange: null,
      loading: true,
      licenseInfo: {},
      startEndTime: [],
      lastUpdateTime: '',
      show: false,
      inputValue: '',
      newLicense: '',
      logoUrl: '',
      companyName: '',
      dialogTitle: '更新授权码',
      dialogType: 1,
      labelText: '输入授权码：',
      labelText1: '输入新授权码：',
      purchaseurl:'https://www.youdeyunke.com/price.html',
    }
  },
  mounted() {
    this.loadData()
  },
  watch: {
  },
  computed: {
    myconfigs: function (){
      return this.$store.state.myconfig;
    },

    endTime(){
      if(!this.licenseInfo.hasOwnProperty("end_time")){
        return '-';
      }
      if(this.licenseInfo.end_time == "forever"){
        return "永久";
      }
      return this.licenseInfo.end_time;
    },


    endTimeWarm(){
      if(!this.licenseInfo){
        return "";
      }
      if(!this.licenseInfo.end_time){
        return "";
      }

      if(this.licenseInfo.end_time == "forever"){
        return "";
      }

      const currentDate = new Date();
      const futureDate = new Date(futureDateStr);

      if (isNaN(futureDate.getTime())) {
        return "";
      }

      if (futureDate <= currentDate) {
        return "";
      }

      // Calculate difference in milliseconds
      const timeDiff = futureDate - currentDate;

      // Calculate difference in days
      const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

      // Calculate difference in months
      const yearsDiff = futureDate.getFullYear() - currentDate.getFullYear();
      const monthsDiff = yearsDiff * 12 + (futureDate.getMonth() - currentDate.getMonth());
      if(monthsDiff > 1){
        return "<span>剩余" + monthsDiff + "个月</span>";
      }
      return "<span>仅剩" + daysDiff + "天</span>";

    },


    server_version(){
      var cversion = this.$store.state.myconfig.server_version
      var newversion = this.$store.state.myconfig.last_server_version
      // 比大小
      var res1 = cversion.split(".");
      var res2 = newversion.split(".");
      var hasNew = false;
      for(var i=0; i<res1.length; i++){
        if(Number(res2[i]) > Number(res1[i])){
          hasNew = true;
        }
      }
      return !hasNew ? cversion : `${cversion}（最新：${newversion}，可升级）`
    },

    license_type_text(){
      return '专业版';
    },
  },
  methods: {
    isImage(value) {
      // 确保value是一个字符串
      if (typeof value === 'string') {
        return value.includes('<img');
      }
      // 如果value不是字符串，则直接返回false
      return false;
    },
    gotoPurchaseUrl(){
      window.open(this.purchaseurl)
    },
    gotoDoc(){
      // 前往帮助文档
      window.open('https://youdeyunke.yuque.com/fbxh1v/pro')
    },

    gotoDevDoc(){
      // 前往帮助文档
      window.open('https://youdeyunke.yuque.com/fbxh1v/dev')
    },

    serviceContact(){
      window.open('https://work.weixin.qq.com/kfid/kfc8a0f8817daf2ec01')
    },
    updateLogo(newLogoUrl) {
      var _this = this
      updateLogo(newLogoUrl).then((resp)=>{
        if(resp.code!=0){
          return
        }
        _this.logoUrl = resp.data
        _this.loadConfig();
        _this.$emit("update")
        _this.$message.success("更新Logo成功");
      })
    },
    loadData() {
      this.loading = true
      var _this = this
      getLicenseInfo().then((resp) => {
        _this.licenseInfo = resp.data
        _this.loading = false
      })
    },
    refreshLicenseInfo() {
      this.loading = true
      var _this = this
      refreshLicenseInfo().then((resp) => {
        this.loading = false
        if (resp.code != 0) {
          return
        }
        this.loadData();
        this.$message.success("刷新授权码成功");
        _this.show = false
        _this.inputValue = ''
      })
    },

    changeLicense(){
        this.loading = true;
        const pattern = /^[0-9A-Z]{4}-[0-9A-Z]{4}-[0-9A-Z]{4}-[0-9A-Z]{4}$/
        if (!pattern.test(this.newLicense)) {
            this.$message.error('新授权码格式错误')
            this.loading = false
            return
          }
        replaceLicenseInfo(this.newLicense).then((resp) => {
          if (resp.code != 0) {
            this.loading = false
            return
          }
          this.$message.success("更换授权码成功");
          this.licenseInfo = resp.data
          this.show = false
          this.inputValue = ''
          this.newLicense = ''
          // 重新加载一次数据
          this.loadData();
        })
    },

    submitData(status) {
      this.loading = true;
      var _this = this
      if(status==1){
        _this.updateCompanyName();
      }
      if (status == 3){



      }
      _this.loading = false
    },
    showDialog(status) {
      if(status==3){
        this.dialogTitle="变更授权码"
        this.labelText="输入新授权码："
        // this.labelText1="输入新授权码："
      }
      this.dialogType = status
      this.show =! this.show
    },
    loadConfig: function () {
      this.loading = true;
      this.$store.dispatch("myconfig/loadMyconfig").then((config) => {
        this.loading = false;
        this.logoUrl = config.logo;
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  //background: rgba(153, 169, 191, 0.99);
  background: #eaeef3;
  text-align: right;
  padding-right: 10px;
}
.bg-purple {
  background: #eaeef3;
  padding-left: 15px;
  text-align: left;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.my-span {
  line-height: 35px;
}

.license-container{
  width: 1077px;
  height: 562px;
  border-radius: 6px;
  background: linear-gradient(110.4deg, #232323 0%, #434855 100%);
  margin: 0 auto;
  padding: 40px 30px 20px 60px;
  margin-top: 30px;
  z-index: 99;
  position: relative;
}
.header{
  margin-bottom: 50px;
  display: flex;
}
.header .line{
  width: 1px;background: #f4f3f3;height: 30px;margin: 10px;margin-top: 24px;
  margin-right: 15px;
}
.header .license-img{
  height: 30px;margin-top: 24px;
}

.logo {
  width: 120px;
  height: 60px;
  // background-color: #000;
  // margin-bottom: 50px;
}

.content {
  display: flex;
  align-items: center;
}

.button-group {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 250px;
  height: 308px;
}


.Btn {
  width: 250px;
  height: 50px;
  border: 1px #E4BE9E solid;
  background: rgba($color: #fff, $alpha: 0);
  color: #fff;
  margin-left: 0;
}
.Btn:hover{
  background: rgba($color: #fff, $alpha: 0.07);
}

.solid {
  background: #E4BE9E;
  color: #fff;
}

.solid:hover {
  background: rgba($color: #E4BE9E, $alpha: 0.5);
  border: 1px #E4BE9E solid;
}

.hollow {
  color: #E4BE9E;
}

.divider {
  background: #484848;
  width: 1px;
  height: 290px;
  margin: 0 50px;
}

.info {
  display: flex;
  flex-direction: column;
  height: 308px;
  justify-content: space-between;
}

.label {
  font-size: 16px;
  color: #999;
  width:120px;
  display: inline-block;
}

.value {
  font-size: 16px;
  color: #fff;
}

.changeBtn {
  font-size: 14px !important;
  padding: 5px 20px;
  background: rgba($color: #fff, $alpha: 0);
  color: #fff;
  border-radius: 4px;
  border: 1px #E4BE9E solid;
  margin-left: 20px;
}

.changeBtn:hover {
  background: rgba($color: #fff, $alpha: 0.07);
  border: 1px #E4BE9E solid;
  color: #fff;
}

.footer {
  margin-top: 60px;
  color: #CECECE;
  font-size: 12px;
  text-align: right;
}
.update-icon{
  cursor: pointer;
}

.update-info {
  margin-right: 12px;
  // cursor: pointer;
}

.license-info-text{
  font-size: 32px;
  font-weight: bold;
  display: flex;
  align-items: flex-end;
  color: #e4be9e;
  padding-bottom: 8px;
}

</style>
